<template>
      <van-nav-bar
  title="个人中心"
  left-text="返回"
  left-arrow
  @click-left="fanhui"
/>
  <div class="change-nickname">
    <van-form @submit="handleSubmit" @reset="handleReset">
      <van-field
        v-model="input"
        name="nickname"
        label="昵称"
        placeholder="请输入新的昵称"
        maxlength="20"
      />
      <van-button
        type="submit"
        block
        size="large"
        class="submit-button"
        @click="baocun"
      >
        保存
      </van-button>
    </van-form>

    <van-toast v-model:show="toastVisible" :message="toastMessage" :type="toastType" />
  </div>
  <van-toast v-model:show="show" style="padding: 0">
  <template #message>
    <van-image :src="image" width="200" height="140" style="display: block" />
  </template>
</van-toast>

</template>

<script setup>
import { ref,reactive } from 'vue';
import { userinfo,userupdate } from '@/api/userinfo';
const router = useRouter();
const input = ref("");

import { showSuccessToast, showFailToast } from 'vant';

// 修改信息
const nickn=ref({
  nickname:input,
})

// 弹出默认fales
const show=ref(false)
// 点击事件
const baocun = async()=>{
  const { data } = await userupdate(nickn.value)
  console.log(input.value);
    
    if(data.code==200) {
    showSuccessToast('保存成功');
    show.value=true;
    router.push('/userinfo')
  }else{
showFailToast('保存失败');
  }

}



const fanhui = () => {
  router.push('/userinfo')
}

</script>

<style scoped>
.change-nickname {
  padding: 16px;
}

.submit-button {
  margin-top: 16px;
}
</style>
